<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
               :submit="submitForm">
    <div slot="body">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="80">
        <vxe-form-item title="行政区划" field="regionId" span="24" :item-render="{}">
          <template #default="{ data }">
            <el-cascader ref="cascaderRegionRef"
                         popper-class="areaCascaderForm"
                         @change="changeRegion('areaCascaderForm')"
                         v-model="data.regionId" :options="regionOptions" filterable
                         :props="{ value: 'id', label: 'name', checkStrictly: true, emitPath: false,lazy:true,lazyLoad:lazyLoadRegion }"
                         clearable
                         style="width: 100%">
                  <span slot-scope="{node, data}" style="margin-left: -10px;padding-left:10px;display:block;"
                        @click="clickNode($event, node)">{{ data.name }}</span>

            </el-cascader>
          </template>
        </vxe-form-item>
        <vxe-form-item title="上级部门" field="parentId" span="24" :item-render="{}">
          <template #default="{ data }">
            <el-cascader ref="cascaderHandleRef"
                         @change="changeLanguage"
                         v-model="data.parentId" :options="options" filterable
                         :props="{ value: 'id', label: 'name', checkStrictly: true, emitPath: false }" clearable
                         style="width: 100%">
                  <span slot-scope="{node, data}" style="margin-left: -10px;padding-left:10px;display:block;"
                        @click="clickNode($event, node)">{{ data.name }}</span>

            </el-cascader>
          </template>
        </vxe-form-item>
        <vxe-form-item title="名称" field="name" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.name" showWordCount clearable placeholder="请输入名称"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="排序" field="sort" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.sort" placeholder="请输入排序" type="integer"/>
          </template>
        </vxe-form-item>

        <vxe-form-item title="备注" field="remarks" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-textarea maxlength="255" v-model="data.remarks" showWordCount clearable placeholder="请输入备注"
                          rows="6"/>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </zero-dialog>
</template>

<script>
import addUpdate from '@/mixins/add-update.js';

export default {
  name: 'addUpdateForm',
  mixins: [addUpdate],
  data() {
    return {
      options: [],
      regionOptions: [],
      addUrl: '/sysDept',
      updateUrl: '/sysDept',
      byIdUrl: '/sysDept',
      dialog: {
        width: '650px', //定义宽度
      },
      form: {//表单数据
        rules: {//表单校验
          name: [{required: true, message: "名称不能为空", trigger: "blur"}],
          sort: [{
            required: true,
            message: "必填,并且是0~10000整数",
            trigger: "blur",
            min: 0,
            max: 10000,
            type: 'number'
          }]
        },
      },
    }
  },
  created() {
    // 局部混入，用于覆写initDialog方法
    const originalInitDialog = this.initDialog; // 保存原始的initDialog方法引用

    this.initDialog = function (params) {
      // 在这里可以添加你自己的逻辑
      this.handleParentDept(params.row)
      if (params.title === '复制') {
        this.copyClick(params)
      } else {
        // 调用原始的initDialog方法
        originalInitDialog.call(this, params);
        // 或者，在执行完原始逻辑后添加额外的处理逻辑
      }
    };
  },
  methods: {
    clickNode($event, node) {
      $event.target.parentElement.parentElement.firstElementChild.click();
    },
    changeLanguage(node) {
      // 选中最后一级，下拉框收缩
      if (!this.$refs.cascaderHandleRef.getCheckedNodes()[0]?.hasChildren) {
        this.$refs.cascaderHandleRef.dropDownVisible = false;
      }
    },
    changeRegion(key) {
      // // 选中最后一级，下拉框收缩
      // if (!this.$refs.cascaderHandleRef.getCheckedNodes()[0]?.hasChildren) {
      //   this.$refs.cascaderHandleRef.dropDownVisible = false;
      // }
      this.$nextTick(() => {
        const dom = document
            .getElementsByClassName(key)[0]
            .getElementsByClassName("el-radio is-focus")[0];
        if (dom) {
          const brother = dom.nextElementSibling;
          brother.click();
        }
      });
    },
    lazyLoadRegion(node, resolve) {
      let id;
      if (node.level !== 0) {
        id = node.data.id
      }
      let config = {
        url: "/sysRegion/getChildrenList",
        method: 'get',
        params: {id: id}
      }
      this.axios(config).then(res => {
        resolve(res.data);
      })

    },
    //处理上级部门
    handleParentDept(row) {
      let id = null
      if (row && row.id) {
        id = row.id
      }
      let config = {
        url: "/sysDept/tree",
        method: 'post',
        data: {id: id}
      }
      this.axios(config).then(res => {
        this.options = res.data
      })

      let regionId = null
      if (row && row.regionId) {
        regionId = row.regionId
      }
      let regionConfig = {
        url: "/sysRegion/getCascadeTree",
        method: 'get',
        params: {id: regionId}
      }
      this.axios(regionConfig).then(res => {
        this.regionOptions = res.data
      })
    },
  }
}
</script>
